
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/BigData/loadjs.js?v=1"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<style type="text/css">
			body {
				width: 100%;
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
			}
			.close {
			    background: orange;
			    color: red;
			    border-radius: 12px;
			    line-height: 20px;
			    text-align: center;
			    height: 20px;
			    width: 20px;
			    font-size: 18px;
			    padding: 1px;
			}
			/* use cross as close button */
			.close::before {
			    content: "\2716";
			}
			
			.mapTip {
			    display: inline-block;
			    width: auto;
			    -webkit-column-width: 310px;
			}
			.b {
			    FONT-WEIGHT: bold;
			}
			
			.menuHistoryPlay{
				width: 28px;
				height: 28px;
				background-image: url("images/gpsicon/historyline24.png");
				background-repeat:no-repeat;
				background-size:24px 24px;
				display:block;
				cursor: hand;
			}
		</style>
		<script type="text/javascript">
			var bDocumentComplete = false;
			document.onreadystatechange = function()			
			{ 	
			　　 if(document.readyState == "complete")
			　　 { 
					bDocumentComplete = true;
			   　}
			}
			var bLoadGoogleMap;
			var googleIconsourceVector;
			var overlayPop;
			var contentPop;
			var mapGoogle;
			var timeVersion = (new Date()).getTime();
			loadScript([{
				"path": "js/index.js?t=" + timeVersion,
				"type": "js"
			}], LoadMainJs);
			
			function LoadMainJs(){
				LoadMain();
			}
			
			function loadGoogleMapJs() {
				loadScript([{
					"path": "js/GoogleMap/ol.css",
					"type": "css"
				}, {
					"path": "js/GoogleMap/ol.js",
					"type": "js"
				}, {
					"path": "js/GoogleMap/arc.js",
					"type": "js"
				}, {
					"path": "js/GoogleMap/HistoryMap.js",
					"type": "js"
				}, {
					"path": "js/GoogleMap/GoogleLatLngCorrect.js",
					"type": "js"
				}], function() {
					var getUrl = function(){	
						if(globalSettings["GoogleUrl"] != undefined){
							LoadGoogleMap(globalSettings["GoogleUrl"]);
							return;
						}					
						$.ajax({
							//请求方式
							type: "GET",
							timeout: 3000,
							//请求的媒体类型
							//contentType: "image/png",
							//dataType: "jsonp",//数据类型为jsonp
							//请求地址
							url: "https://maps.googleapis.com/maps/vt/pb=!1m4!1m3!1i10!2i835!3i445!2m3!1e0!2sm!3i380072576!3m8!2sen-US!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0",
							//数据，json字符串
							//请求成功
							success: function(result) {
								sGoogleUrl =
									"https://maps.googleapis.com/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2sen-US!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0";
								globalSettings["GoogleUrl"] = sGoogleUrl;
								app.setSettings(globalSettings);
								LoadGoogleMap("https://maps.googleapis.com/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2sen-US!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0");
							},
							//请求失败，包含具体的错误信息
							error: function(e) {
								//console.log(e.status);
								//console.log(e.responseText);
								sGoogleUrl =
									"https://mt2.google.cn/vt/lyrs=m@225000000&hl=en-US&gl=cn&gl=cn&src=app&x={x}&y={y}&z={z}&s=Galile";
								globalSettings["GoogleUrl"] = sGoogleUrl;
								app.setSettings(globalSettings);
								LoadGoogleMap("https://mt2.google.cn/vt/lyrs=m@225000000&hl=en-US&gl=cn&gl=cn&src=app&x={x}&y={y}&z={z}&s=Galile");
							}
						});
					}
					var loadFun = function(){
						globalSettings = parent.globalSettings;
						if (globalSettings["lang"] == "Zh") {
							arrLang = arrLanZHCN;
						} else {
							arrLang = arrLanEn;
						}
						SetCancelAlarm();
						ChangeLan("body", arrLang);
						sGlobalToken = parent.sGlobalToken;
						getUrl();
						parent.AddGpsToMap();
					}
					if(bDocumentComplete){
						loadFun();
					}
					else{
						$(document).ready(function() {  
							loadFun();
						});
					}
				});
			}
			
			function LoadGoogleMap(googleUrl) {
				$('#popup').show();
				var containerPop;
				googleIconsourceVector = new ol.source.Vector({
					features: []
				});
				var dLatCenter = 30.910400;
				var dLngCenter = 108.362240;
				if(dMapCenterX != 0 && dMapCenterY != 0){
					var googleXY = CheckXYGpsToGoogle(dMapCenterX, dMapCenterY);
					dLngCenter = googleXY[0].lng;
					dLatCenter = googleXY[0].lat;
				}
				//卫星地图底图地址：http://khm1.googleapis.com/kh?v=108&hl=zh-CN&x=13&y=7&z=4&token=127641  
				//卫星地图地名地址: http://mt0.googleapis.com/vt?lyrs=h@174000000&src=apiv3&hl=zh-CN&x=14&y=5&z=5&s=Galileo&style=api%7Csmartmaps,high_dpi&w=512
				var url = googleUrl; // "https://maps.googleapis.com/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2sen-US!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0";
				var weixingUrl = "https://www.google.cn/maps/vt?lyrs=s@726&gl=cn&x={x}&y={y}&z={z}";
				weixingUrl = "https://mt2.google.cn/vt?lyrs=s@186&hl=Zh_CN&gl=cn&x={x}&y={y}&z={z}";
				//console.log(new Date());
				var wenziUrl =
					"https://mt3.google.cn/vt/imgtp=png32&lyrs=h@278000000&src=app&expIds=201527&rlbl=1&hl=en&gl=en&x={x}&y={y}&z={z}&s=Gal";
				//实例化全屏显示控件
				var fullScreenControl = new ol.control.FullScreen();
				var googleMapLayer = new ol.layer.Tile({
					source: new ol.source.XYZ({
						url: url
						//url: 'https://mt2.google.cn/vt/lyrs=m@225000000&hl=en-US&gl=cn&gl=cn&src=app&x={x}&y={y}&z={z}&s=Galile'
						//                    url:'https://www.google.cn/maps/vt?lyrs=t@189&gl=cn&x={x}&y={y}&z={z}'
						//                  url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0'
						//url: 'https://maps.googleapis.com/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2sen-US!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0'
						//                  url:'http://mt0.google.cn/maps/vt?lyrs=s@773&gl=cn&x={x}&y={y}&z={z}'
						//                    url:'http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}'
						//                    url:'http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}'
						//                    url:'http://www.google.cn/maps/vt?lyrs=h@189&gl=cn&x={x}&y={y}&z={z}'
			
					})
				});
				var weixingMap = new ol.layer.Tile({
					visible: false,
					source: new ol.source.XYZ({
						url: weixingUrl // "https://khms2.google.com/kh/v=865?x={x}&y={y}&z={z}"
					})
				});
				var wenziMap = new ol.layer.Tile({
					visible: false,
					source: new ol.source.XYZ({
						url: wenziUrl // "https://khms2.google.com/kh/v=865?x={x}&y={y}&z={z}"
					})
				});
				mapGoogle = new ol.Map({
					layers: [googleMapLayer, weixingMap, wenziMap],
					view: new ol.View({
						center: [dLngCenter, dLatCenter],
						projection: 'EPSG:4326',
						zoom: 4,
						minZoom: 4,
						maxZoom: 19,
						constrainResolution: true
					}),
					target: 'map2'
				});
				mapGoogle.getMapType = function() {
					return mapBaidu.getMapType();
				}
				$('#divGoogleMap').find('.normal').click(function() {
					if (!$(this).hasClass('active')) {
						$(this).addClass('active').siblings().removeClass('active');
						googleMapLayer.setVisible(true); //显示瓦片
						weixingMap.setVisible(false); //关闭矢量
						wenziMap.setVisible(false);
					}
				})
				$('#divGoogleMap').find('.mix').click(function() {
					if (!$(this).hasClass('active')) {
						$(this).addClass('active').siblings().removeClass('active')
						googleMapLayer.setVisible(false); //关闭瓦片
						weixingMap.setVisible(true); //显示矢量
						wenziMap.setVisible(true);
					}
				});
			
				//将全屏显示控件加载到map中
				//            mapGoogle.addControl(fullScreenControl);
				var that = this;
				var overlay = this;
				var container = document.getElementById("popup");
				var content = document.getElementById("popup-content");
				overlayPop = new ol.Overlay({
					//设置弹出框的容器
					element: container,
					//是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
					autoPan: true
				});
				mapGoogle.addOverlay(overlayPop);
				overlayPop.setPosition(undefined);
			
				//矢量图层的标注图层
				var vectorLayer = new ol.layer.Vector({
					source: googleIconsourceVector
				});
				mapGoogle.addLayer(vectorLayer);
				$('.ol-attribution').hide();
			
				var popupCloser = document.getElementById("popup-closer");
				containerPop = document.getElementById("popup");
				contentPop = document.getElementById("popup-content");
				mapGoogle.on('singleclick', function(e) {
					overlayPop = new ol.Overlay({
						//设置弹出框的容器
						element: containerPop,
						//是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
						autoPan: true
					});
					if (mapGoogle.hasFeatureAtPixel(e.pixel)) {
						var feature = mapGoogle.getFeaturesAtPixel(e.pixel);
			
						var pixel = mapGoogle.getEventPixel(e.originalEvent);
						mapGoogle.forEachFeatureAtPixel(pixel, function(feature) {
							TerminalIconClick({"item":feature.get("location2")}, true);
						});
					} else {
						infoWindowVehID = "";
						overlayPop.setPosition(undefined);
					}
				})
			
				popupCloser.addEventListener('click', function() {
					//infowindowID = "";
					//overlayPop.setPosition(undefined);
				});
				bLoadGoogleMap = true;
				//$('#divGoogleMap').trigger("resize");
			}
			
			
			function jsCallback(){
				loadGoogleMapJs();
			}
			
			function SetMapCenter(lng, lat, zoom) {
				if(isNaN(lng) || isNaN(lat) || lng == undefined || lat == undefined){
					return;
				}
				setTimeout(function() {
					var googleXY = CheckXYGpsToGoogle(lng, lat);
					lng = googleXY[0].lng;
					lat = googleXY[0].lat;
					if(mapGoogle == undefined){
						return;
					}
					var view = mapGoogle.getView();
					if (view.getZoom() < 15 && zoom == undefined) {
						view.setZoom(15); //初始化时，即可设置中心点和地图缩放级别。
					} else {
						if (zoom != undefined) {
							view.setZoom(zoom);
						}
					}
					view.setCenter([lng, lat]);			
				}, 300);
			}
			
			
			function AddifGpsToMap(data){
				var iLen = 0;
				var arrOnlinePoint = [];
				var arrOfflinePoint = [];
				var arrAlarmPoint = [];
				for (var sKeyT in data) {
					iLen++;
					var value = data[sKeyT];
					if (!value["online"]) {
						if (value["lat"] && value["lng"]) {
							var baiduXY;
							baiduXY = CheckXYGpsToGoogle(value["lng"], value["lat"]);
							var lng = baiduXY[0].lng;
							var lat = baiduXY[0].lat;
							arrOfflinePoint.push({
								geometry: {
									type: 'Point',
									coordinates: [lng, lat]
								},
								deg: value["Angle"],
								icon: imageOffline,
								text: value["name"],
								item: value
							});
						}
					} else if (value["alarmv"]) {
						if (value["lat"] && value["lng"]) {
							var baiduXY;
							baiduXY = CheckXYGpsToGoogle(value["lng"], value["lat"]);
							var lng = baiduXY[0].lng;
							var lat = baiduXY[0].lat;
							arrAlarmPoint.push({
								geometry: {
									type: 'Point',
									coordinates: [lng, lat]
								},
								deg: value["Angle"],
								icon: imageAlarm,
								text: value["name"],
								item: value
							});
						}
					} else {
						if (value["lat"] && value["lng"]) {
							var baiduXY;
							baiduXY = CheckXYGpsToGoogle(value["lng"], value["lat"]);
							var lng = baiduXY[0].lng;
							var lat = baiduXY[0].lat;
							arrOnlinePoint.push({
								geometry: {
									type: 'Point',
									coordinates: [lng, lat]
								},
								deg: value["Angle"],
								icon: imageOnline,
								text: value["name"],
								item: value
							});
						}
					}
				}
				if (bLoadGoogleMap) {
					var iZIndex = 1;
					$.each(googleIconsourceVector.getFeatures(),function(iF, valueF){
					        googleIconsourceVector.removeFeature(valueF);
					});
					$.each(arrOnlinePoint, function(i,value){
						 var feature2 = new ol.Feature({
						     geometry: new ol.geom.Point(value.geometry.coordinates),
						     name: value.text, //自定义属性
						     population: 2115, //自定义属性
						     idCode: value.item["id"],
						     location: value.geometry.coordinates,
						     location2: value,
						     step: 1,
						     url: "images/gpsicon/carBlue0.gif",
							 item: value.item
						 });
						 feature2.setStyle(createGoogleFeatureStyle(feature2, "images/gpsicon/carBlue0.gif",value.item["Angle"], iZIndex++));
						 
						 googleIconsourceVector.addFeature(feature2);
					});
					$.each(arrOfflinePoint, function(i,value){
						 var feature2 = new ol.Feature({
						     geometry: new ol.geom.Point(value.geometry.coordinates),
						     name: value.text, //自定义属性
						     population: 2115, //自定义属性
						     idCode: value.item["id"],
						     location: value.geometry.coordinates,
						     location2: value,
						     step: 1,
						     url: "images/gpsicon/carGray0.gif",
							 item: value.item
						 });
						 feature2.setStyle(createGoogleFeatureStyle(feature2, "images/gpsicon/carGray0.gif",value.item["Angle"], iZIndex++));
						 
						 googleIconsourceVector.addFeature(feature2);
					});
					$.each(arrAlarmPoint, function(i,value){
						 var feature2 = new ol.Feature({
						     geometry: new ol.geom.Point(value.geometry.coordinates),
						     name: value.text, //自定义属性
						     population: 2115, //自定义属性
						     idCode: value.item["id"],
						     location: value.geometry.coordinates,
						     location2: value,
						     step: 1,
						     url: "images/gpsicon/carRed0.gif",
							 item: value.item
						 });
						 feature2.setStyle(createGoogleFeatureStyle(feature2, "images/gpsicon/carRed0.gif",value.item["Angle"], iZIndex++));
						 
						 googleIconsourceVector.addFeature(feature2);
					});
					//$('#map2').trigger("resize");
				}
				if(infoWindowVehID != undefined && infoWindowVehID.length > 0 && data[infoWindowVehID] != undefined){
					var value = data[infoWindowVehID];
					if (value["lat"] && value["lng"]) {
						var baiduXY;
						baiduXY = CheckXYGpsToGoogle(value["lng"], value["lat"]);
						var lng = baiduXY[0].lng;
						var lat = baiduXY[0].lat;
						var rowT = {
							geometry: {
								type: 'Point',
								coordinates: [lng, lat]
							},
							deg: value["Angle"],
							text: value["name"],
							item: value
						};
						TerminalIconClick({item: rowT});
					}
				}
			}
		
			var infoWindowVeh;
			var infoWindowVehID;
			function TerminalIconClick(item) {
				if (item == null || item == undefined) {
					infoWindowVehID = "";
					overlayPop.setPosition(undefined);
					return;
				}
				globalIconClickID = item.item.item["id"];
				if(item.item.item["time"] == undefined){
					item.item.item["time"] = "";
				}
				if(item.item.item["positionstatus"] == undefined){
					item.item.item["positionstatus"] = "";
				}
				if(item.item.item["unitstatus"] == undefined){
					item.item.item["unitstatus"] = "";
				}
				if(item.item.item["speedangle"] == undefined){
					item.item.item["speedangle"] = "";
				}
				/* var sHtml = "<label datalang='Plate'>" + arrLang["Plate"] + "</label>：" + item.item["name"];
				sHtml += "&nbsp;&nbsp;&nbsp;&nbsp;<label datalang='Time'>" + arrLang["Time"] + "</label>：" + item.item["time"];
				sHtml += "<br /><label datalang='State'>" + arrLang["State"] + "</label>：" + item.item["positionstatus"] + item.item[
					"unitstatus"];
				sHtml += "<br /><label datalang='SpeedAngle'>" + arrLang["SpeedAngle"] + "</label>：" + item.item["speedangle"];
				if (item.item["mileage"] != undefined) {
					sHtml += "&nbsp;&nbsp;&nbsp;<label datalang='Mileage'>" + arrLang["Mileage"] + "</label>：" + (item.item["mileage"] /
						1000.0).toFixed("0.0") + "<label datalang='Km'>" + arrLang["Km"] + "</label>";;
				}
				sHtml += "&nbsp;&nbsp;&nbsp;<label datalang='Oil'>" + arrLang["Oil"] + "</label>：" + (item.item["Oil"] == undefined ?
					"" : item.item["Oil"]);
				sHtml += "<br /><label datalang='Address'>" + arrLang["Address"] + "</label>：<label id='lblLocation'></label>";
				 */
				var sHtml = '<div class="mapTip"><span class="b">' + item.item.item["name"] + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br>'
					+ '<span class="b">' + arrLang["Time"] + '：</span>&nbsp;' + item.item.item["time"] + '&nbsp;&nbsp;&nbsp;&nbsp;<br />'
					+ '<span class="b">' + arrLang["SpeedAngle"] + '：</span>&nbsp;' + item.item.item["speedangle"] + '<br />'
					+ '<span class="b">' + arrLang["Address"] + '：</span><span id="lblLocation"></span><br />'
					+ '<span class="b">'+ arrLang["Mileage"] + '：</span>&nbsp;' + (item.item.item["mileage"] / 1000.0).toFixed("0.0") + arrLang["Km"] + '</label>&nbsp;&nbsp;&nbsp;&nbsp;'
					+ '<span class="b">'+ arrLang["Oil"] + '：</span>&nbsp;' + (item.item.item["Oil"] == undefined ?	"" : item.item.item["Oil"]) + '</label><br />'
					+ '<span class="b">' + arrLang["State"] + '：</span>&nbsp;' + item.item.item["positionstatus"] + item.item.item["unitstatus"] + '<br />'
					+ '<span class="menuHistoryPlay" title="' + arrLang["HistoryPlay"] + '" onclick="" onmouseout="">&nbsp;&nbsp;</span></div>';
				
				//$('#mapTipsDetail').html(sHtml);
				/* $('#divIconClickCancel')[0].addEventListener('click', function(e) {
					globalIconClickID = "";
					$('#mapTips').hide();
				}); */
				infoWindowVehID = item.item.item["id"];
				contentPop.innerHTML = sHtml;
				overlayPop.setPosition([item.item.geometry.coordinates[0], item.item.geometry.coordinates[1]]); //coodinate);
				//显示overlay
				mapGoogle.removeOverlay(overlayPop);
				mapGoogle.addOverlay(overlayPop);
				addressIconClickTick = (new Date()).getTime();
				if (item.item.item["lng"] != undefined && item.item.item["lng"] != 0 && item.item.item["lat"] != 0 && item.item.item["lat"] !=
					undefined) {
					var iSnt = addressIconClickTick;
					var sLanT = globalSettings["map"];
					if (globalSettings["lang"] != "Zh") {
						sLanT = "Google";
					}
			
					parent.GetLatLngAddress(sLanT, item.item.item["lng"], item.item.item["lat"], iSnt, function(add, sn) {
						if (addressIconClickTick == sn) {
							$('#lblLocation').text(add);
						}
					});
				}
			
				//$('#mapTips').show();
			
			}
			
			
			/* //将tile(瓦片)坐标系转换为lnglat(经度纬度)坐标系
			function toLnglat(tile) {
			        double n = Math.pow(2, tile.getZoom());
			        double lng = tile.getX() / n * 360.0 - 180.0;
			        double lat = Math.atan(Math.sinh(Math.PI * (1 - 2 * tile.getY() / n)));
			        lat = lat * 180.0 / Math.PI;
			        return new Lnglat(lng, lat);
			
			 }
			
			//将lnglat坐标系转换为tile坐标系
			function toTile(int zoom, Lnglat lnglat) 
			{         
				double n = Math.pow(2, zoom);         
				double tileX = ((lnglat.getLng() + 180) / 360) * n;         
				double tileY = (1 - (Math.log(Math.tan(Math.toRadians(lnglat.getLat())) + (1 / Math.cos(Math.toRadians(lnglat.getLat())))) / Math.PI)) / 2 * n;         
				return new Tile(new Double(tileX).intValue(), new Double(tileY).intValue(), zoom); 
			} */
		</script>
	</head>
	<body id="divGoogleMap">
		<div id="map2" onclick="this.focus();" style="width: 100%;height: 100%;overflow: hidden;margin:0;">
			<div id="mouse-position"></div>
		</div>
		<div id="popup" class="ol-popup" style="display: none;">
			<a href="#" id="popup-closer" class="ol-popup-closer"></a>
			<div id="popup-content"></div>
		</div>
		<div class="mapSwitch">
			<a href="#" class="normal active" datalang="Map"></a>
			<a href="#" class="mix" datalang="MixedMap"></a>
		</div>
	</body>
</html>
